<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>layout Demo</title>
    <link rel="stylesheet" href="../dist/siwi-layout.css">
    <style media="screen">
        * {
            box-sizing: border-box;
        }
        
        body {
            margin: 0;
        }
        
        .even {
            height: 50px;
            background: #A7B2B8;
            margin: 5px 0;
            border-left: 2px solid white;
            border-right: 2px solid white;
        }
        
        .odd {
            height: 50px;
            background: #616E75;
            margin: 5px 0;
            border-left: 2px solid white;
            border-right: 2px solid white;
        }
        
        .bg-odd {
            background: #616E75;
        }
        
        .bg-even {
            background: #A7B2B8;
        }
        
        span {
            color: white;
            display: block;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        
        span::before {
            content: "";
        }
        
        .height-100 {
            height: 100px;
        }
        
        .height-80 {
            height: 80px;
        }
        
        .height-60 {
            height: 60px;
        }
        
        .height-30 {
            height: 30px;
        }
    </style>
</head>

<body>
    <div class="sw flex-row">
        <div class="col-18">
            <h1>基本</h1>
            <div class="sw flex-row">
                <div class="col-24 odd"><span>24</span></div>

                <div class="col-12 odd"><span>12</span></div>
                <div class="col-12 even"><span>12</span></div>

                <div class="col-8 odd"><span>8</span></div>
                <div class="col-8 even"><span>8</span></div>
                <div class="col-8 odd"><span>8</span></div>

                <div class="col-6 odd"><span>6</span></div>
                <div class="col-6 even"><span>6</span></div>
                <div class="col-6 odd"><span>6</span></div>
                <div class="col-6 even"><span>6</span></div>

                <div class="col-4 odd"><span>4</span></div>
                <div class="col-4 even"><span>4</span></div>
                <div class="col-4 odd"><span>4</span></div>
                <div class="col-4 even"><span>4</span></div>
                <div class="col-4 odd"><span>4</span></div>
                <div class="col-4 even"><span>4</span></div>

                <div class="col-3 odd"><span>3</span></div>
                <div class="col-3 even"><span>3</span></div>
                <div class="col-3 odd"><span>3</span></div>
                <div class="col-3 even"><span>3</span></div>
                <div class="col-3 odd"><span>3</span></div>
                <div class="col-3 even"><span>3</span></div>
                <div class="col-3 odd"><span>3</span></div>
                <div class="col-3 even"><span>3</span></div>

                <div class="col-2 odd"><span>2</span></div>
                <div class="col-2 even"><span>2</span></div>
                <div class="col-2 odd"><span>2</span></div>
                <div class="col-2 even"><span>2</span></div>
                <div class="col-2 odd"><span>2</span></div>
                <div class="col-2 even"><span>2</span></div>
                <div class="col-2 odd"><span>2</span></div>
                <div class="col-2 even"><span>2</span></div>
                <div class="col-2 odd"><span>2</span></div>
                <div class="col-2 even"><span>2</span></div>
                <div class="col-2 odd"><span>2</span></div>
                <div class="col-2 even"><span>2</span></div>




                <div class="col-1 odd"><span>1</span></div>
                <div class="col-1 even"><span>1</span></div>
                <div class="col-1 odd"><span>1</span></div>
                <div class="col-1 even"><span>1</span></div>
                <div class="col-1 odd"><span>1</span></div>
                <div class="col-1 even"><span>1</span></div>
                <div class="col-1 odd"><span>1</span></div>
                <div class="col-1 even"><span>1</span></div>
                <div class="col-1 odd"><span>1</span></div>
                <div class="col-1 even"><span>1</span></div>
                <div class="col-1 odd"><span>1</span></div>
                <div class="col-1 even"><span>1</span></div>
                <div class="col-1 odd"><span>1</span></div>
                <div class="col-1 even"><span>1</span></div>
                <div class="col-1 even"><span>1</span></div>
                <div class="col-1 even"><span>1</span></div>
                <div class="col-1 odd"><span>1</span></div>
                <div class="col-1 even"><span>1</span></div>
                <div class="col-1 odd"><span>1</span></div>
                <div class="col-1 even"><span>1</span></div>
                <div class="col-1 even"><span>1</span></div>
                <div class="col-1 even"><span>1</span></div>
                <div class="col-1 even"><span>1</span></div>
                <div class="col-1 even"><span>1</span></div>

            </div>
            <div class="sw flex-row justify-content-flex-start">
                <div class="col-6 odd"><span>flex-start</span></div>
                <div class="col-6 even"><span>flex-start</span></div>
            </div>
            <div class="sw flex-row justify-content-flex-end">
                <div class="col-6 odd"><span>flex-end</span></div>
                <div class="col-6 even"><span>flex-end</span></div>
            </div>
            <div class="sw flex-row justify-content-center">
                <div class="col-6 odd"><span>flex-center</span></div>
                <div class="col-6 even"><span>flex-center</span></div>
            </div>
            <div class="sw flex-row justify-content-space-around">
                <div class="col-6 odd"><span>flex-space-around</span></div>
                <div class="col col-6 even"><span>flex-space-around</span></div>
            </div>
            <div class="sw flex-row justify-content-space-between">
                <div class="col-6 odd"><span>flex-space-between</span></div>
                <div class="col col-6 even"><span>flex-space-between</span></div>
            </div>
            <div class="sw flex-row justify-content-center align-items-flex-start">
                <div class="col-3 odd height-100"><span>flex-top</span></div>
                <div class="col-3 even height-80"><span>flex-top</span></div>
                <div class="col-3 odd height-50"><span>flex-top</span></div>
                <div class="col-3 even height-60"><span>flex-top</span></div>
            </div>
            <div class="sw flex-row justify-content-center align-items-center">
                <div class="col-3 odd height-100"><span>flex-middle</span></div>
                <div class="col-3 even height-80"><span>flex-middle</span></div>
                <div class="col-3 odd height-50"><span>flex-middle</span></div>
                <div class="col-3 even height-60"><span>flex-middle</span></div>
            </div>
            <div class="sw flex-row justify-content-center align-items-flex-end">
                <div class="col-3 odd height-100"><span>flex-bottom</span></div>
                <div class="col-3 even height-80"><span>flex-bottom</span></div>
                <div class="col-3 odd height-50"><span>flex-bottom</span></div>
                <div class="col-3 even height-60"><span>flex-bottom</span></div>
            </div>
            <div class="sw flex-row">
                <div class="col-8 bg offset-3"><span>col-8 offset-3</span></div>
            </div>
            <h1>Pull Push</h1>
            <div class="siwi row">
                <div class="col col-8 bg-odd push-16"><span>col-8  col-push-16</span></div>
                <div class="col col-16 bg-even pull-8"><span>col-16  col-pull-8</span></div>
            </div>
        </div>
        <div class="col-6" style="background: #EFEFEF;min-height: 3000px;border-left:10px solid white;">

        </div>
    </div>
</body>

</html>